<template>
  <div>
    <el-tabs style="position: absolute; width: 100%; height: 553px; top: 0%; left: 0.159744%; text-align: left;"
             :tab-position="tabPosition" value="first" @tab-click="_tabClick">
      <el-tab-pane name="first" style="height: 474px;" label="基本信息">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px"
                 label-position="left">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="12">
              <el-form-item label="姓名" prop="field109">
                <el-input v-model="formData.field109" placeholder="请输入姓名" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="教师编号" prop="field110">
                <el-input v-model="formData.field110" placeholder="请输入教师编号" readonly clearable
                          :style="{width: '100%'}"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start" align="top">
            <el-col :span="12">
              <el-form-item label="性别" prop="field114">
                <el-radio-group v-model="formData.field114" size="medium">
                  <el-radio v-for="(item, index) in field114Options" :key="index" :label="item.value"
                            :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="民族" prop="field118">
                <el-select v-model="formData.field118" placeholder="请输入民族" filterable clearable>
                  <el-option v-for="(item, index) in field118Options" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start" align="top">
            <el-col :span="12">
              <el-form-item label="证件类别" prop="field122">
                <el-select v-model="formData.field122" placeholder="请选择证件类别" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field122Options" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码" prop="field124">
                <el-input v-model="formData.field124" placeholder="请输入证件号码" clearable :style="{width: '100%'}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start" align="top">
            <el-col :span="12">
              <el-form-item label="出生日期" prop="field132">
                <el-date-picker type="datetime" v-model="formData.field132" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择出生日期" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="100px" label="参加工作日期" prop="field133">
                <el-date-picker type="datetime" v-model="formData.field133" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss" :style="{width: '100%'}" placeholder="请选择参加工作日期" clearable>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="start" align="top">
            <el-col :span="12">
              <el-form-item label="籍贯" prop="field135">
                <el-cascader v-model="formData.field135" :options="field135Options" :props="field135Props"
                             :style="{width: '100%'}" placeholder="请选择籍贯" separator="" clearable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生地" prop="field138">
                <el-cascader v-model="formData.field138" :options="field138Options" :props="field138Props"
                             :style="{width: '100%'}" placeholder="请选择出生地" separator="" clearable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="12">
              <el-form-item label="政治面貌" prop="field145">
                <el-select v-model="formData.field145" placeholder="请选择政治面貌" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field145Options" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="90px" label="入党团时间" prop="field148">
                <el-date-picker v-model="formData.field148" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                :style="{width: '100%'}" placeholder="请选择入党团时间" clearable></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="12">
              <el-form-item label="婚姻状况" prop="field151">
                <el-select v-model="formData.field151" placeholder="请选择婚姻状况" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field151Options" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="健康状况" prop="field152">
                <el-select v-model="formData.field152" placeholder="请选择健康状况" clearable :style="{width: '100%'}">
                  <el-option v-for="(item, index) in field152Options" :key="index" :label="item.label"
                             :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="补充信息" prop="field173">
            <el-input v-model="formData.field173" type="textarea" placeholder="请输入补充信息" :maxlength="500"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-row type="flex" justify="start" align="bottom">
            <el-col :span="5">
              <el-row>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-form-item label-width="0" prop="field156">
                <el-upload ref="field156" :file-list="field156fileList" :action="field156Action"
                           :before-upload="field156BeforeUpload" list-type="picture" accept="image/*">
                  <el-button size="small" type="primary" icon="el-icon-upload">上传图片</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="field167">
                <el-button type="primary" icon="el-icon-s-promotion" size="medium"> 提交 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="field168">
                <el-button type="success" icon="el-icon-check" size="medium"> 保存 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="field169">
                <el-button type="primary" icon="el-icon-edit-outline" size="medium"> 修改 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="field170">
                <el-button type="primary" icon="el-icon-delete" size="medium"> 重置 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label-width="0" prop="field171">
                <el-button type="info" icon="el-icon-download" size="medium"> 导出 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="second" style="height: 474px;" label="教育背景"></el-tab-pane>
      <el-tab-pane name="three" style="height: 475px;" label="工作经历"></el-tab-pane>
      <el-tab-pane name="four" style="height: 473px;" label="职称信息"></el-tab-pane>
      <el-tab-pane name="five" style="height: 472px;" label="年度考核"></el-tab-pane>
      <el-tab-pane name="six" style="height: 472px;" label="培训情况"></el-tab-pane>
      <el-tab-pane name="seven" style="height: 472px;" label="档案信息"></el-tab-pane>
      <el-tab-pane name="eight" style="height: 472px;" label="附件材料"></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      tabPosition: 'left',
      formData: {
        field156: null,
        field167: undefined,
        field168: undefined,
        field169: undefined,
        field170: undefined,
        field171: undefined,
        field109: undefined,
        field110: undefined,
        field114: undefined,
        field118: undefined,
        field122: undefined,
        field124: undefined,
        field132: null,
        field133: null,
        field135: [1, 2],
        field138: [1, 2],
        field145: undefined,
        field148: undefined,
        field151: undefined,
        field152: undefined,
        field173: undefined,
      },
      rules: {
        field109: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        field110: [{
          required: true,
          message: '请输入教师编号',
          trigger: 'blur'
        }],
        field114: [{
          required: true,
          message: '性别不能为空',
          trigger: 'change'
        }],
        field118: [],
        field122: [],
        field124: [],
        field132: [],
        field133: [],
        field135: [],
        field138: [],
        field145: [],
        field148: [],
        field151: [],
        field152: [],
        field173: [],
      },
      field156Action: 'https://jsonplaceholder.typicode.com/posts/',
      field156fileList: [],
      field114Options: [{
        "label": "男",
        "value": 1
      }, {
        "label": "女",
        "value": 2
      }],
      field118Options: [{
        "label": "汉族",
        "value": 1
      }, {
        "label": "蒙古族",
        "value": 2
      }, {
        "label": "回族",
        "value": 3
      }, {
        "label": "藏族",
        "value": ""
      }],
      field122Options: [{
        "label": "居民身份证",
        "value": 1
      }, {
        "label": "军官证",
        "value": 2
      }, {
        "label": "士兵证",
        "value": 3
      }, {
        "label": "香港特别行政区护照、身份证",
        "value": 4
      }, {
        "label": "澳门特别行政区护照、身份证",
        "value": 5
      }],
      field124Options: [{
        "label": "居民身份证",
        "value": 1
      }, {
        "label": "军官证",
        "value": 2
      }, {
        "label": "士兵证",
        "value": 3
      }, {
        "label": "香港特别行政区护照、身份证",
        "value": 4
      }, {
        "label": "澳门特别行政区护照、身份证",
        "value": 5
      }],
      field135Options: [{
        "id": 1,
        "value": 1,
        "label": "选项1",
        "children": [{
          "id": 2,
          "value": 2,
          "label": "选项1-1"
        }]
      }],
      field138Options: [{
        "id": 1,
        "value": 1,
        "label": "选项1",
        "children": [{
          "id": 2,
          "value": 2,
          "label": "选项1-1"
        }]
      }],
      field145Options: [{
        "label": "中共党员",
        "value": 1
      }, {
        "label": "预备党员",
        "value": 2
      }, {
        "label": "共青团员",
        "value": 3
      }, {
        "label": "群众",
        "value": 4
      }],
      field151Options: [{
        "label": "未婚",
        "value": 1
      }, {
        "label": "已婚",
        "value": 2
      }, {
        "label": "再婚",
        "value": 3
      }, {
        "label": "离婚",
        "value": 4
      }, {
        "label": "丧偶",
        "value": 5
      }],
      field152Options: [{
        "label": "健康",
        "value": 1
      }, {
        "label": "身体一般",
        "value": 2
      }],
      field135Props: {
        "multiple": false,
        "label": "label",
        "value": "value",
        "children": "children",
        "checkStrictly": false
      },
      field138Props: {
        "multiple": false,
        "label": "label",
        "value": "value",
        "children": "children",
        "checkStrictly": false
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field156BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10
      if (!isRightSize) {
        this.$message.error('文件大小超过 10MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
  }
}

</script>
<style>
</style>
